<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="com.example.domain.Post,com.example.domain.Comment,com.example.domain.User" %>
<%@ page import="java.util.List" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心 - 论坛系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f8f9fa;
            min-height: 100vh;
        }

        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px 0;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .header-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .user-avatar {
            width: 60px;
            height: 60px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            font-weight: bold;
        }

        .user-details h1 {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 5px;
        }

        .user-details p {
            opacity: 0.9;
            font-size: 14px;
        }

        .nav-links {
            display: flex;
            gap: 15px;
        }

        .nav-link {
            color: white;
            text-decoration: none;
            padding: 10px 20px;
            border-radius: 25px;
            background: rgba(255, 255, 255, 0.1);
            transition: background 0.3s ease;
            font-weight: 500;
        }

        .nav-link:hover {
            background: rgba(255, 255, 255, 0.2);
            text-decoration: none;
            color: white;
        }

        .container {
            max-width: 1200px;
            margin: 40px auto;
            padding: 0 20px;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }

        .stat-card {
            background: white;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            text-align: center;
            transition: transform 0.3s ease;
        }

        .stat-card:hover {
            transform: translateY(-5px);
        }

        .stat-icon {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin: 0 auto 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: white;
        }

        .stat-icon.posts {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .stat-icon.comments {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }

        .stat-icon.settings {
            background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
            color: #333;
        }

        .stat-number {
            font-size: 28px;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 5px;
        }

        .stat-label {
            color: #7f8c8d;
            font-size: 14px;
        }

        .section {
            background: white;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            margin-bottom: 30px;
        }

        .section-header {
            padding: 25px;
            text-align: center;
            color: white;
        }

        .posts-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }

        .comments-header {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }

        .section-header h2 {
            font-size: 22px;
            font-weight: 600;
            margin-bottom: 5px;
        }

        .section-header p {
            opacity: 0.9;
            font-size: 14px;
        }

        .content-list {
            padding: 0;
        }

        .content-item {
            padding: 25px;
            border-bottom: 1px solid #ecf0f1;
            transition: background 0.3s ease;
        }

        .content-item:last-child {
            border-bottom: none;
        }

        .content-item:hover {
            background: #f8f9fa;
        }

        .post-item-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 15px;
        }

        .post-title {
            font-size: 18px;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 8px;
            line-height: 1.4;
        }

        .post-title a {
            color: inherit;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .post-title a:hover {
            color: #667eea;
        }

        .post-meta {
            color: #7f8c8d;
            font-size: 13px;
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .post-content {
            color: #34495e;
            line-height: 1.6;
            margin-bottom: 15px;
        }

        .post-actions {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .action-btn {
            padding: 8px 16px;
            border-radius: 20px;
            text-decoration: none;
            font-size: 13px;
            font-weight: 500;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
        }

        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .btn-secondary {
            background: #ecf0f1;
            color: #2c3e50;
        }

        .btn-success {
            background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
            color: white;
        }

        .action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            text-decoration: none;
            color: white;
        }

        .btn-secondary:hover {
            color: #2c3e50;
        }

        .comment-item {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .comment-content {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 10px;
            border-left: 4px solid #f093fb;
        }

        .comment-text {
            color: #2c3e50;
            line-height: 1.5;
            margin-bottom: 8px;
        }

        .comment-link {
            color: #f093fb;
            text-decoration: none;
            font-weight: 500;
            font-size: 13px;
        }

        .comment-link:hover {
            text-decoration: underline;
        }

        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #7f8c8d;
        }

        .empty-state-icon {
            font-size: 48px;
            margin-bottom: 20px;
            opacity: 0.5;
        }

        .empty-state h3 {
            font-size: 20px;
            margin-bottom: 10px;
            color: #2c3e50;
        }

        .empty-state p {
            font-size: 14px;
            margin-bottom: 20px;
        }

        .empty-action {
            display: inline-block;
            padding: 12px 24px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            text-decoration: none;
            border-radius: 25px;
            font-weight: 500;
            transition: transform 0.3s ease;
        }

        .empty-action:hover {
            transform: translateY(-2px);
            text-decoration: none;
            color: white;
        }

        @media (max-width: 768px) {
            .header-content {
                flex-direction: column;
                gap: 20px;
                text-align: center;
            }

            .nav-links {
                flex-wrap: wrap;
                justify-content: center;
            }

            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .post-item-header {
                flex-direction: column;
                gap: 10px;
            }

            .post-actions {
                justify-content: flex-start;
            }

            .action-btn {
                font-size: 12px;
                padding: 6px 12px;
            }
        }
    </style>
</head>
<body>
<%
    User currentUser = (User) session.getAttribute("USER_SESSION");
    List<Post> myPosts = (List<Post>) request.getAttribute("myPosts");
    List<Comment> myComments = (List<Comment>) request.getAttribute("myComments");

    int postCount = myPosts != null ? myPosts.size() : 0;
    int commentCount = myComments != null ? myComments.size() : 0;
%>

<div class="header">
    <div class="header-content">
        <div class="user-info">
            <div class="user-avatar">
                <%= currentUser != null ? currentUser.getUsername().substring(0, 1).toUpperCase() : "U" %>
            </div>
            <div class="user-details">
                <h1><%= currentUser != null ? currentUser.getUsername() : "用户" %></h1>
                <p>欢迎来到您的个人中心</p>
            </div>
        </div>
        <div class="nav-links">
            <a href="/main" class="nav-link">🏠 首页</a>
            <a href="/post" class="nav-link">✏️ 发帖</a>
            <a href="/user/changePassword" class="nav-link">🔒 修改密码</a>
            <a href="/logout" class="nav-link">🚪 退出</a>
        </div>
    </div>
</div>

<div class="container">
    <!-- 统计卡片 -->
    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-icon posts">📝</div>
            <div class="stat-number"><%= postCount %></div>
            <div class="stat-label">我的帖子</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon comments">💬</div>
            <div class="stat-number"><%= commentCount %></div>
            <div class="stat-label">我的评论</div>
        </div>
        <div class="stat-card">
            <a href="/user/changePassword" style="text-decoration: none; color: inherit;">
                <div class="stat-icon settings">🔒</div>
                <div class="stat-number">安全</div>
                <div class="stat-label">修改密码</div>
            </a>
        </div>
    </div>

    <!-- 我的发帖 -->
    <div class="section">
        <div class="section-header posts-header">
            <h2>📝 我的发帖</h2>
            <p>管理您发布的所有帖子</p>
        </div>

        <div class="content-list">
            <% if (myPosts != null && !myPosts.isEmpty()) { %>
            <% for (Post p : myPosts) { %>
            <div class="content-item">
                <div class="post-item-header">
                    <div>
                        <div class="post-title">
                            <a href="/postDetail?id=<%= p.getId() %>"><%= p.getTitle() %></a>
                        </div>
                        <div class="post-meta">
                            <span>🕒 <%= p.getCreateTime() %></span>
                            <span>👁️ 查看详情</span>
                        </div>
                    </div>
                </div>

                <div class="post-content">
                    <%= p.getContent().length() > 150 ? p.getContent().substring(0, 150) + "..." : p.getContent() %>
                </div>

                <div class="post-actions">
                    <a href="/postDetail?id=<%= p.getId() %>" class="action-btn btn-primary">查看详情</a>
                    <a href="/post/edit?id=<%= p.getId() %>" class="action-btn btn-success">编辑帖子</a>
                </div>
            </div>
            <% } %>
            <% } else { %>
            <div class="empty-state">
                <div class="empty-state-icon">📝</div>
                <h3>还没有发布帖子</h3>
                <p>开始分享您的想法和见解吧！</p>
                <a href="/post" class="empty-action">立即发帖</a>
            </div>
            <% } %>
        </div>
    </div>

    <!-- 我的评论 -->
    <div class="section">
        <div class="section-header comments-header">
            <h2>💬 我的评论</h2>
            <p>查看您参与的所有讨论</p>
        </div>

        <div class="content-list">
            <% if (myComments != null && !myComments.isEmpty()) { %>
            <% for (Comment c : myComments) { %>
            <div class="content-item">
                <div class="comment-item">
                    <div class="comment-content">
                        <div class="comment-text"><%= c.getContent() %></div>
                        <a href="/postDetail?id=<%= c.getPostId() %>#comment-<%= c.getId() %>" class="comment-link">
                            查看原帖 →
                        </a>
                    </div>
                    <div class="post-meta">
                        <span>🕒 <%= c.getCreateTime() %></span>
                        <span>📍 帖子ID: <%= c.getPostId() %></span>
                    </div>
                </div>
            </div>
            <% } %>
            <% } else { %>
            <div class="empty-state">
                <div class="empty-state-icon">💬</div>
                <h3>还没有发表评论</h3>
                <p>参与讨论，分享您的观点！</p>
                <a href="/main" class="empty-action">浏览帖子</a>
            </div>
            <% } %>
        </div>
    </div>
</div>
</body>
</html>
